<template>
  <a-modal
    :open="visible"
    title="📋 今日排班"
    width="1000px"
    @cancel="handleCancel"
    :footer="null"
  >
    <div class="today-schedule">
      <!-- 日期选择 -->
      <div class="date-selector">
        <a-space>
          <a-button @click="changeDate(-1)">前一天</a-button>
          <a-date-picker
            v-model:value="selectedDate"
            format="YYYY-MM-DD"
            @change="onDateChange"
          />
          <a-button @click="changeDate(1)">后一天</a-button>
          <a-button type="primary" @click="goToToday">今天</a-button>
        </a-space>
      </div>

      <!-- 排班表格 -->
      <div class="schedule-table">
        <a-table
          :columns="scheduleColumns"
          :data-source="scheduleData"
          :pagination="false"
          size="small"
          row-key="id"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'doctor'">
              <div class="doctor-info">
                <a-avatar :src="record.avatar" size="small">
                  {{ record.name.charAt(0) }}
                </a-avatar>
                <span>{{ record.name }}</span>
              </div>
            </template>
            <template v-else-if="column.key === 'department'">
              <a-tag :color="getDepartmentColor(record.department)">
                {{ record.department }}
              </a-tag>
            </template>
            <template v-else-if="column.key === 'status'">
              <a-tag :color="getStatusColor(record.status)">
                {{ getStatusText(record.status) }}
              </a-tag>
            </template>
            <template v-else-if="column.key === 'morning'">
              <div class="shift-cell" :class="getShiftClass(record.morning)">
                {{ getShiftText(record.morning) }}
              </div>
            </template>
            <template v-else-if="column.key === 'afternoon'">
              <div class="shift-cell" :class="getShiftClass(record.afternoon)">
                {{ getShiftText(record.afternoon) }}
              </div>
            </template>
            <template v-else-if="column.key === 'evening'">
              <div class="shift-cell" :class="getShiftClass(record.evening)">
                {{ getShiftText(record.evening) }}
              </div>
            </template>
            <template v-else-if="column.key === 'action'">
              <a-space>
                <a-button
                  type="link"
                  size="small"
                  @click="viewSchedule(record)"
                >
                  查看详情
                </a-button>
                <a-button
                  type="link"
                  size="small"
                  @click="editSchedule(record)"
                >
                  编辑
                </a-button>
              </a-space>
            </template>
          </template>
        </a-table>
      </div>

      <!-- 统计信息 -->
      <div class="schedule-stats">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-card size="small">
              <div class="stat-item">
                <div class="stat-number">{{ stats.totalDoctors }}</div>
                <div class="stat-label">总医生数</div>
              </div>
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card size="small">
              <div class="stat-item">
                <div class="stat-number">{{ stats.onDuty }}</div>
                <div class="stat-label">在岗医生</div>
              </div>
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card size="small">
              <div class="stat-item">
                <div class="stat-number">{{ stats.offDuty }}</div>
                <div class="stat-label">休息医生</div>
              </div>
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card size="small">
              <div class="stat-item">
                <div class="stat-number">{{ stats.emergency }}</div>
                <div class="stat-label">急诊医生</div>
              </div>
            </a-card>
          </a-col>
        </a-row>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { message } from 'ant-design-vue';
import dayjs from 'dayjs';

interface Props {
  visible: boolean;
}

interface Emits {
  (e: 'update:visible',value: boolean): void
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

// 选中的日期
const selectedDate = ref(dayjs());

// 排班数据
const scheduleData = ref([
  {
    id: 'D001',
    name: '李医生',
    department: '内科',
    avatar: '',
    status: 'on-duty',
    morning: 'working',
    afternoon: 'working',
    evening: 'off',
    notes: '上午门诊，下午手术',
  },
  {
    id: 'D002',
    name: '王医生',
    department: '外科',
    avatar: '',
    status: 'on-duty',
    morning: 'off',
    afternoon: 'working',
    evening: 'working',
    notes: '下午门诊，晚上值班',
  },
  {
    id: 'D003',
    name: '赵医生',
    department: '皮肤科',
    avatar: '',
    status: 'on-duty',
    morning: 'working',
    afternoon: 'off',
    evening: 'off',
    notes: '上午门诊',
  },
  {
    id: 'D004',
    name: '陈医生',
    department: '牙科',
    avatar: '',
    status: 'off-duty',
    morning: 'off',
    afternoon: 'off',
    evening: 'off',
    notes: '休息日',
  },
  {
    id: 'D005',
    name: '张医生',
    department: '急诊科',
    avatar: '',
    status: 'emergency',
    morning: 'working',
    afternoon: 'working',
    evening: 'working',
    notes: '24小时急诊值班',
  },
]);

// 排班表格列定义
const scheduleColumns = [
  {
    title: '医生',
    dataIndex: 'doctor',
    key: 'doctor',
    width: 120,
  },
  {
    title: '科室',
    dataIndex: 'department',
    key: 'department',
    width: 100,
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 100,
  },
  {
    title: '上午 (08:00-12:00)',
    dataIndex: 'morning',
    key: 'morning',
    width: 150,
  },
  {
    title: '下午 (14:00-18:00)',
    dataIndex: 'afternoon',
    key: 'afternoon',
    width: 150,
  },
  {
    title: '晚上 (19:00-22:00)',
    dataIndex: 'evening',
    key: 'evening',
    width: 150,
  },
  {
    title: '操作',
    key: 'action',
    width: 120,
  },
];

// 计算属性
const stats = computed(() => {
  const total = scheduleData.value.length;
  const onDuty = scheduleData.value.filter(
    (d) => d.status === 'on-duty',
  ).length;
  const offDuty = scheduleData.value.filter(
    (d) => d.status === 'off-duty',
  ).length;
  const emergency = scheduleData.value.filter(
    (d) => d.status === 'emergency',
  ).length;

  return {
    totalDoctors: total,
    onDuty,
    offDuty,
    emergency,
  };
});

// 方法
const getDepartmentColor = (department: string) => {
  const colorMap: Record<string, string> = {
    内科: 'blue',
    外科: 'green',
    皮肤科: 'orange',
    牙科: 'purple',
    急诊科: 'red',
  };
  return colorMap[department] || 'default';
};

const getStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    'on-duty': 'green',
    'off-duty': 'gray',
    emergency: 'red',
  };
  return colorMap[status] || 'default';
};

const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    'on-duty': '在岗',
    'off-duty': '休息',
    emergency: '急诊',
  };
  return textMap[status] || status;
};

const getShiftClass = (shift: string) => {
  const classMap: Record<string, string> = {
    working: 'shift-working',
    off: 'shift-off',
    emergency: 'shift-emergency',
  };
  return classMap[shift] || '';
};

const getShiftText = (shift: string) => {
  const textMap: Record<string, string> = {
    working: '值班',
    off: '休息',
    emergency: '急诊',
  };
  return textMap[shift] || shift;
};

const changeDate = (days: number) => {
  selectedDate.value = selectedDate.value.add(days, 'day');
  loadScheduleData();
};

const onDateChange = () => {
  loadScheduleData();
};

const goToToday = () => {
  selectedDate.value = dayjs();
  loadScheduleData();
};

const loadScheduleData = () => {
  message.info(`加载 ${selectedDate.value.format('YYYY-MM-DD')} 的排班数据`);
  // 这里可以调用API加载对应日期的排班数据
};

const viewSchedule = (doctor: any) => {
  message.info(`查看 ${doctor.name} 的排班详情`);
};

const editSchedule = (doctor: any) => {
  message.info(`编辑 ${doctor.name} 的排班`);
};

const handleCancel = () => {
  emit('update:visible', false);
};
</script>

<style scoped>
.today-schedule {
  max-height: 600px;
  overflow-y: auto;
}

.date-selector {
  margin-bottom: 24px;
  padding: 16px;
  background: #fafafa;
  border-radius: 8px;
  text-align: center;
}

.schedule-table {
  margin-bottom: 24px;
}

.doctor-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.shift-cell {
  padding: 4px 8px;
  border-radius: 4px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
}

.shift-working {
  background: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.shift-off {
  background: #f5f5f5;
  color: #8c8c8c;
  border: 1px solid #d9d9d9;
}

.shift-emergency {
  background: #fff2f0;
  color: #ff4d4f;
  border: 1px solid #ffccc7;
}

.schedule-stats {
  margin-top: 16px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 24px;
  font-weight: 700;
  color: #1890ff;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #8c8c8c;
}

:deep(.ant-table-thead > tr > th) {
  background: #fafafa;
  font-weight: 600;
  text-align: center;
}

:deep(.ant-table-tbody > tr > td) {
  text-align: center;
}
</style>
